<template>
  <a-modal :maskClosable="false" cancelText="关闭" destroyOnClose style="top: 150px" :width="880" v-model="visible" :confirmLoading="confirmLoading" @ok="handleSubmit">
    <template slot="title">
      <div class="modal-title">
        <img src="@/assets/images/system/common/icon.png" />
        <div>{{ title }}</div>
      </div>
    </template>
    <a-form v-bind="formLayout" :form="form">
      <a-form-item style="display: none">
        <a-input v-decorator.trim="['id']" />
      </a-form-item>
      <div class="form-fl">
        <a-form-item label="字段一">
          <a-input placeholder="请输入字段一" v-decorator.trim="['field1', { rules: [{ required: true, message: '请输入字段一' }] }]" />
        </a-form-item>
        <a-form-item label="字段二">
          <a-input placeholder="请输入字段二" v-decorator.trim="['field2', { rules: [{ required: true, message: '请输入字段二' }] }]" />
        </a-form-item>
        <a-form-item label="事项类型">
          <a-select placeholder="事项类型" v-decorator.trim="['affairType', { rules: [{ required: true, message: '请选择事项类型' }] }]">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">成功</a-select-option>
            <a-select-option :value="2">失败</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-switch v-decorator.trim="['status', { valuePropName: 'checked' }]" checked-children="是" un-checked-children="否" />
        </a-form-item>
      </div>
      <a-form-item label="事项描述">
        <a-textarea rows="4" placeholder="请输入事项描述" v-decorator.trim="['remark']" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { save } from '@/api/test'
import pick from 'lodash.pick'

export default {
  name: 'add-or-update',
  data() {
    return {
      visible: false,
      formLayout: {
        labelCol: {
          style: 'width: 85px',
        },
        wrapperCol: {
          style: 'flex:1',
        },
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      title: '',
    }
  },
  methods: {
    add() {
      this.form.resetFields()
      this.visible = true
      this.title = '新增'
    },
    edit(record) {
      this.title = '编辑'
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        let filed = ['id', 'field1', 'field2', ]
        // 回显字段
        this.form.setFieldsValue(pick(this.mdl, filed))
      })

    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          save(values)
            .then((res) => {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.ant-row.ant-form-item {
  display: flex;
  flex-flow: row nowrap;
}
</style>
